<template>
  <div class="wft-particles-container" :style="particlesContainerStyle">
    <vue-particles 
      id="wft-tsparticles"
      :particlesInit="particlesInit"
      :options="particlesOpt"
    />
    <div class="content" :style="contentStyle">
      <slot />
    </div>
  </div>
</template>
<script setup lang="ts">
import particlesOpt from './config/particles2'
import { loadSlim } from "tsparticles-slim"
import { computed } from 'vue'

const props = withDefaults(defineProps<{
  width?: string | number,
  height?: string | number,
  contentWidth?: string | number,
  contentHeight?: string | number,
  backgroundColor?: string,
  backgroundImage?: string
}>(), {
  width: '100%',
  height: '100%',
  contentWidth: '23%',
  contentHeight: '37%',
  backgroundColor: '#002a3a',
  backgroundImage: ''
})

const particlesContainerStyle = computed(() => {
  return {
    width: typeof props.width === 'string' ? props.width : props.width + 'px',
    height: typeof props.height === 'string' ? props.height : props.height + 'px',
    backgroundColor: props.backgroundColor,
    backgroundImage: `url(${props.backgroundImage})`
  }
})

const contentStyle = computed(() => {
  return {
    width: typeof props.contentWidth === 'string' ? props.contentWidth : props.contentWidth + 'px',
    height: typeof props.contentHeight === 'string' ? props.contentHeight : props.contentHeight + 'px',
  }
})

const particlesInit = async (engine: any) => {
  await loadSlim(engine);
}
</script>
<style scoped>
.wft-particles-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#wft-tsparticles {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.wft-particles-container .content {
  z-index: 9;
}
</style>